React カスタムフックをjestでテストする
背景
カスタムフックをテストしたい場合のHowToをここに記しておく
方法としては主に「ライブラリ無しでやる」と「ライブラリ有りでやる」の2つがあるが、今回は「ライブラリ有りでやる」方法を記しておく。
結論から言うとreact-testing-library、react-hooks-testing-libraryを利用するといい。
インストール方法
(普通のraect testing library)
$ yarn add @testing-library/react
(reacthooks testing library)
$ yarn add @testing-library/react-hooks
基本的な使い方(参考:testing-library/react-hooks-testing-library)
code: サンプルカスタムhooks.js
import { useState, useCallback } from 'react'
function useCounter() {
const count, setCount = useState(0)
const increment = useCallback(() => setCount((x) => x + 1), [])
return { count, increment }
}
export default useCounter
code: カスタムhooks.test.js
import { renderHook, act } from '@testing-library/react-hooks'
import useCounter from './useCounter'
test('should increment counter', () => {
const { result } = renderHook(() => useCounter())
act(() => {
result.current.increment()
})
expect(result.current.count).toBe(1)
})
説明
大事なのはrenderHook関数とact関数です。
renderHook関数
Reactのコンポーネントやフックをテストするためには、一回レンダリングしないといけない。
その初期作業をやってくれる関数。
裏では、仮想ブラウザが動いてるはず。
act関数
コンポーネントありきのテストで、何かを実行するための関数。
これが無いとエラーが起きる。
基本的には、この2つの関数を覚えておけばテストできるはず。
参考.icon
フックに関するよくある質問 – React
react-hooks-testing-libraryでカスタムフックのテストを書いてみました|dinseyLadySango|note